<template>
  <div class="sale">
    <div class="saleTop">
      <div class="saleTop_left">
        <div class="xianShiGou">限时购</div>
        <div class="xianShiQiang">好货限时抢</div>
      </div>
      <div class="saleTop_right">
        <div class="xianShiGou">秒杀</div>
        <div class="xianShiQiang">爆款低价秒</div>
      </div>
    </div>
    <div class="saleContent">
      <div class="saleContent_goods" v-for="(goods,index) in goodsList" :key="index">
        <img :src="'../../../../../binbing/homePagePublic/'+goods.img" />
        <p class="goodsPrice">￥{{goods.price}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Seckill",
  data() {
    return {
      goodsList: [
        {
          img: "sale01.webp",
          price: 95,
        },
        {
          img: "sale02.webp",
          price: 95,
        },
        {
          img: "sale03.webp",
          price: 95,
        },
        {
          img: "sale04.webp",
          price: 95,
        },
      ],
    };
  },
};
</script>

<style scoped>
.sale {
  width: 3.58rem;
  height: 1.74rem;
  background-color: #fff;
  margin: auto;
  padding: 0 0.12rem;
  border-radius: 0.16rem;
}

.sale .saleTop {
  width: 3.5rem;
  height: 0.4rem;
  padding-top: 0.04rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

.saleTop_left,
.saleTop_right {
  width: 1.75rem;
  height: 0.4rem;
  background-color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.xianShiGou {
  /* width: 0.48rem; */
  height: 0.4rem;
  font-size: 0.16rem;
  font-weight: bold;
  line-height: 0.38rem;
}

.xianShiQiang {
  width: 0.5rem;
  height: 0.16rem;
  padding: 0 0.04rem;
  font-size: 0.1rem;
  background-color: #fef0e7;
  color: rgba(0, 0, 0, 0.9);
  border-radius: 0.04rem;
  margin-left: 0.04rem;
}

.saleContent {
  width: 3.5rem;
  height: 1.12rem;
  margin: 0.1rem auto 0.08rem;
  display: flex;
  justify-content: space-between;
}

.saleContent_goods {
  width: 0.84rem;
  height: 1.12rem;
  text-align: center;
  font-size: 0.11rem;
  font-weight: 600;
  color: rgb(207, 10, 44);
}

.saleContent_goods img {
  width: 0.68rem;
  height: 0.68rem;
  display: inline-block;
}

.saleContent_goods p {
  margin-top: 0.05rem;
}
</style>